var myChart = echarts.init(document.getElementById('main'));
var myChartOff = echarts.init(document.getElementById('mainOff'));
var myChartStuatus = echarts.init(document.getElementById('mainStatus'));
var myChartPoints = echarts.init(document.getElementById('mainPoints'));
var myChartCircle = echarts.init(document.getElementById('mainCircle'));
var myChartCircle1 = echarts.init(document.getElementById('mainCircle1'));
var myChartZhen = echarts.init(document.getElementById('mainZhen'));
var myChartZhen1 = echarts.init(document.getElementById('mainZhen1'));
var myChartXu = echarts.init(document.getElementById('mainXu'));
var myChartXu1 = echarts.init(document.getElementById('mainXu1'));
var data = [
  [[0, 0, "真实报警"], [33, 20, "真实报警"], [55, 40, "真实报警"], [70, 43, "真实报警"], [99, 41, "真实报警"], [96, 77, "真实报警"], [116, 65, "真实报警"], [136, 85, "真实报警"]],
  [[0, 20, "误报报警"], [44, 38, "误报报警"], [66, 20, "误报报警"], [91, 60, "误报报警"], [93, 38, "误报报警"], [109, 85, "误报报警"], [129, 56, "误报报警"], [142, 33, "误报报警"]]
];
// 指定图表的配置项和数据
var option = {
  title: {
    text: '今日行政区域分布',
    textStyle: {
      color: '#32C5FF'
    },
    subtext: '报警数量',
    subtextStyle: {
      color: 'white'
    },
    padding: [0, 0, 10, 50]
  },
  tooltip: {},
  legend: {
    data: ['报警'],
    right: 30,
    top: 10

  },
  xAxis: {
    data: ["张北县", "桥东区", "宣化区", "桥西区", "万全区", "尚义县"]
  },
  yAxis: {
    scale: true,
    max: 400,
    min: 0,
    splitNumber: 4,
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  series: [{
    name: '报警',
    type: 'bar',
    data: [280, 298, 180, 90, 150, 180],
    barWidth: 30,
    itemStyle: {    // 图形的形状
      color: 'rgba(50,197,255,0.21)',
    },
  }]
};
var optionOff = {
  title: {
    text: '今日行政区域分布',
    textStyle: {
      color: '#32C5FF'
    },
    subtext: '报警数量',
    subtextStyle: {
      color: 'white'
    },
    padding: [0, 0, 10, 50]
  },
  tooltip: {},
  legend: {
    data: ['离线'],
    right: 30,
    top: 10
  },
  xAxis: {
    data: ["张北县", "桥东区", "宣化区", "桥西区", "万全区", "尚义县"]
  },
  yAxis: {
    scale: true,
    max: 400,
    min: 0,
    splitNumber: 4,
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  series: [{
    name: '离线',
    type: 'bar',
    data: [280, 298, 180, 90, 150, 180],
    barWidth: 30,
    itemStyle: {    // 图形的形状
      color: 'rgba(60,67,255,0.21)',
    },
  }]
};
var optionStuatus = {
  title: {
    text: '今日趋势分布',
    textStyle: {
      color: '#32C5FF'
    },
    subtext: '单位：个',
    subtextStyle: {
      color: 'white'
    },
    padding: [0, 0, 10, 50]
  },
  tooltip: {},
  legend: {
  },
  xAxis: {
    data: ["12:00", "13:00", "14:00", "15:00", "16:00"]
  },
  yAxis: {
    scale: true,
    max: 500,
    min: 0,
    splitNumber: 5,
    axisLine: { //y轴
      show: false
    },
  },
  series: [
    {
      name: '',
      type: 'bar',
      data: [400, 330, 360, 300, 150, 380],
      barWidth: 30,
      itemStyle: {    // 图形的形状
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//图例使用渐变色
            offset: 0,
            color: 'rgb(0, 102, 255)'
          }, {
            offset: 1,
            color: 'rgb(0, 153, 255)'
          }])
        }
      }
    }, {

      name: '',
      type: 'line',
      //yAxisIndex: 1,
      data: [400, 330, 360, 300, 150],
      itemStyle: {
        color: 'yellow'
      }

    }
  ]
};
var optionPoints = {
  title: {
    text: '今日趋势',
    textStyle: {
      color: '#32C5FF'
    },
    subtext: '报警数量',
    subtextStyle: {
      color: 'white'
    }
    //padding: [0, 0, 10, 50]
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    right: 10,
    data: ['真实报警', '误报报警']
  },
  xAxis: {
    type: 'category',
    nameGap: 10
    // data: ["工厂", "仓库", "加油站", "酒店", "医院", "学校", "写字楼", "三小场所"]
  },
  yAxis: {
    scale: true,
    max: 100,
    min: 0,
    splitNumber: 5,
    axisLine: { //y轴
      show: false
    },
  },
  series: [{
    name: '真实报警',
    data: data[0],
    type: 'scatter',
    symbolSize: function (data) {
      return 10
    },
    // emphasis: {
    //   label: {
    //     show: true,
    //     formatter: function (param) {
    //       return param.data[2];
    //     },
    //     position: 'top'
    //   }
    // },
    itemStyle: {
      shadowBlur: 10,
      shadowColor: 'rgba(120, 36, 50, 0.5)',
      shadowOffsetY: 5,
      color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgb(251, 118, 123)'
      }, {
        offset: 1,
        color: 'rgb(204, 46, 72)'
      }])
    }
  }, {
    name: '误报报警',
    data: data[1],
    type: 'scatter',
    symbolSize: function (data) {
      return 10;
    },
    // emphasis: {
    //   label: {
    //     show: true,
    //     formatter: function (param) {
    //       return param.data[2];
    //     },
    //     position: 'top'
    //   }
    // },
    itemStyle: {
      shadowBlur: 10,
      shadowColor: 'rgba(25, 100, 150, 0.5)',
      shadowOffsetY: 5,
      color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
        offset: 0,
        color: 'rgb(129, 227, 238)'
      }, {
        offset: 1,
        color: 'rgb(25, 183, 207)'
      }])
    }
  }]
};

var optionCircle = {
  title: {
    text: '该区域报警趋势',
    textStyle: {
      color: '#32C5FF'
    },
    subtext: '报警数',
    subtextStyle: {
      color: 'white'
    },
    padding: [0, 0, 10, 50],
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [0, 6, 11, 16, 21, 26, 31]
  },
  yAxis: {
    max: 100,
    min: 0,
    splitNumber: 5,
    axisLine: { //y轴
      show: false
    }
  },
  series: [{
    name: name,
    type: 'line',
    smooth: true,
    sampling: 'average',
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: 'rgba(160, 214, 196,.6)'
      }, {
        offset: 1,
        color: '#fff'
      }])
    },
    data: [60, 80, 42, 70, 58, 62, 20],
  }]
};
var optionCircle1 = {
  title: {
    text: '该区域报警趋势',
    textStyle: {
      color: '#32C5FF'
    },
    subtext: '处理数',
    subtextStyle: {
      color: 'white'
    },
    padding: [0, 0, 10, 50],
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [0, 6, 11, 16, 21, 26, 31]
  },
  yAxis: {
    max: 100,
    min: 0,
    splitNumber: 5,
  },
  series: [{
    name: name,
    type: 'line',
    smooth: true,
    sampling: 'average',
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: 'rgba(120, 114, 16,.6)'
      }, {
        offset: 1,
        color: '#fff'
      }])
    },
    data: [60, 80, 42, 70, 58, 62, 20],
  }]
};


var optionYuanZhen = {
  graphic: {       //图形中间文字
    type: "text",
    left: "center",
    top: "center",
    text: "真实报警",
    subtext: "30%",
    style: {
      text: "真实报警/n" + "30%",
      textAlign: "center",
      fill: "#fff",
      fontSize: 10
    }
  },
  color: ['red', 'green'],
  series: [
    {
      name: '报警来源',
      type: 'pie',
      radius: ['45%', '40%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        { value: 30, name: '真实报警' },
        { value: 70, name: '虚假报警' },
      ]
    }
  ]
};

var optionYuanXu = {
  graphic: {       //图形中间文字
    type: "text",
    left: "center",
    top: "center",
    style: {
      text: "虚假报警/n" + "70%",
      textAlign: "center",
      fill: "#fff",
      fontSize: 10
    }
  },
  color: ['blue', 'yellow'],

  series: [
    {
      name: '报警来源',
      type: 'pie',
      radius: ['45%', '40%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        { value: 30, name: '真实报警' },
        { value: 70, name: '虚假报警' },
      ]
    }
  ]
};


// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChartOff.setOption(optionOff);
myChartStuatus.setOption(optionStuatus);
myChartPoints.setOption(optionPoints);
myChartCircle.setOption(optionCircle);
myChartCircle1.setOption(optionCircle1);
myChartZhen.setOption(optionYuanZhen);
myChartXu.setOption(optionYuanXu);
myChartZhen1.setOption(optionYuanZhen);
myChartXu1.setOption(optionYuanXu);